<template>
	<view>
		<view class="mheader">
			<view class="item">
				<view class="col" v-model="result1.result" @tap="dateVisible1=true">{{result1.result}}<image class="mimg" src="../../static/image/xaunze.png"/></view>
				<view class="col" @tap="dateVisible2=true">{{result2.result}}<image class="mimg" src="../../static/image/xaunze.png"/></view>
			</view>
			<view class="mfont"><view class="mfontcenter">至</view></view>
		</view>
		
		<view class="whole" v-if="dataList.length==0">
			<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
			<text>暂无数据</text>
		</view>
		<view v-if="dataList.length!=0">
			<view class="mlist" v-for="(item,index) in dataList" :key="index">
				<view class="mlimg"><image style="width: 50rpx;height: 40rpx;" src="../../static/image/canting-2@2x.png"></image></view>
				<view class="mlist-left">
					<view class="shopName">{{item.shopName}}</view>
					<view class="amt">{{item.amt}}</view>
					<view class="createDate">{{item.createDate}}</view>
					<view class="typeText">{{item.typeText}}</view>
				</view>
			</view>
		</view>
		<w-picker
			:visible.sync="dateVisible1"
			mode="date" 
			startYear="2020" 
			endYear="2030"
			:current="true"
			fields="second"
			@confirm="onConfirm($event,'date1')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date1"
		></w-picker>
		<w-picker
			:visible.sync="dateVisible2"
			mode="date" 
			startYear="2020"
			endYear="2030"
			value="2020-03-07 16:45:45"
			:current="true"
			fields="second"
			@confirm="onConfirm2($event,'date2')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date2"
		></w-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateVisible1:false,
				dateVisible2:false,
				result1:{
					result:""
				},
				result2:{
					result:""
				},
				no: '',
				idCard: '',
				dataList: []
			};
		},
		onLoad(){
			this.getmonth()
			this.no = uni.getStorageSync('idCard')
			// this.idCard = uni.getStorageSync('idCard')
			this.getData()
		},
		watch: {
			result1: {
				handler(newName, oldName) {
					this.getData()
				},
			},
			result2: {
				handler(newName, oldName) {
					this.getData()
				},
			},
		},
		methods:{
			async getData(){
				// 19届学长的接口留在这里万一以后出来什么事还可以参照一下
				// let murl = '/api-baiyun/dish/getCardTrans?card='
				// + this.no + '&ed=' 
				// + this.result2.result + '&mob=' + this.idCard + '&sd=' + this.result1.result;
				// 19届学长的接口留在这里万一以后出来什么事还可以参照一下
				let murl = '/api-baiyun/dish/getCardTrans?no='
				+ this.no + '&ed=' 
				+ this.result2.result + '&sd=' + this.result1.result;
				const res = await this.$dietRequest({
					url: murl,
					method: "get",
				})
				this.dataList = res.data.list
			},
			onConfirm(res,type){
				this.result1=res;
			},
			onConfirm2(res,type){
				this.result2=res;
			},
			onCancel(){
				
			},
			getmonth(){
				let date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate();
				m = m >= 10 ? m : "0" + m;
				d = d >= 10 ? d : "0" + d;
				let date2 = new Date(y,m,0)
				let rq = date2.getDate()
				let st =y + "-" + m + "-" + "01" + " " +"00:00:00";
				let en =y + "-" + m + "-" + rq + " " +"00:00:00";
				this.result1.result = st
				this.result2.result = en
			}
		}
	}
</script>

<style lang="scss">
	.item{
		display:inline-block;
		float: left;
		height: 100%;
		padding-left: 10%;
		width: 80%;
	}
	.mfont{
		font-size: 20px;
		display:inline-block;
		width: 20%;
		height: 70px;
		float: right;
		text-align: center;
	}
	.mfontcenter{
		display:flex;
		justify-content:center;
		align-items:center;
		text-align: center;
		height: 100%;
	}
	.mheader{
		font-weight: bold;
		// color: #999999;
		display:flex;
		justify-content:center;
		align-items:center;
		text-align: center;
		height: 70px;
		border-bottom: 1rpx solid #e7e8ec;
		background-color: #efefef;
	}
	.col{
		display:flex;
		justify-content:center;
		align-items:center;
		height: 50%;
	}
	.mimg{
		width: 19rpx;
		height: 12rpx;
		margin-left: 10px;
	}
	.whole {
		text-align: center;
		font-size: 60rpx;
		color: #959595;
		.image {
			margin: 320rpx 0 50rpx 0;
			width: 100%;
			height: 350rpx;
		}
	}
	.mlist{
		display: grid;
		grid-template-columns: 60px 1fr;
		grid-template-rows: repeat(1,1fr);
		margin: 2% 0;
	}
	.mlimg{
		position: relative;
		image{
			position: absolute;
			right: 0;
			top: 0;
			margin-right: 20%;
			margin-top: 10%;
		}
	}
	.mlist-left{
		display: grid;
		grid-template-columns: 65% 1fr;
		grid-auto-rows: minmax(10px, auto);
		padding: 3% 0;
		margin-right: 2%;
		border-bottom: 1px solid #dddddd;
	}
	.shopName{
	}
	.createDate{
	}
	.amt{
	}
	.typeText{
	}
</style>
